<template>
  <view class="search-tab">
    <view
      class="search-tab-box"
      v-for="(item, index) in selectConfig"
      :key="index"
      :style="{ width: item.width || '28%' }"
    >
      <view class="all-vote">
        <uni-data-select
          v-if="item.type==='select'"
          v-model="formData[item.key]"
          :placeholder="item.placeholder"
          :localdata="item.options"
          :clear="true"
          @change="change($event, item.key)"
        ></uni-data-select>
        <uni-datetime-picker
          v-if="item.type==='datetime'"
          type="date"
          v-model="formData[item.key]"
          :placeholder="item.placeholder"
          @change="change($event, item.key)"
        />
      </view>
      <image class="img" v-if="!formData[item.key]" :src="baseIconUrl + '/commonIcon/icon_tab_select.png'" alt="" />
    </view>
    <view class="more-search search-tab-box" v-if="showMoreSearch">
      <view class="search-btn" @click="clickAllSelect">
        更多
        <image class="img" :src="baseIconUrl + '/commonIcon/icon_tab_select.png'" alt="" />
      </view>
      <view class="select-box" v-if="showAllSelect" @click="clickMark">
        <view class="content">
          <view class="content-box" v-for="(item, index) in moreConfig" :key="index" @click.stop>
            <view class="left-title" @click="clickLabel(item.label)" v-if="chooseMoreForm[item.showKey] === item.showValue">
              <view :class="['title-item', activeLabel === item.label ? 'active-title' : '']">{{ item.label }}</view>
              <view :class="['circle', activeLabel === item.label ? 'active-circle' : '']" v-if="chooseMoreForm[item.key]"></view>
            </view>
            <view class="right-content" v-if="activeLabel && activeLabel === item.label">
              <view v-if="item.type === 'treeSelect'"  class="tree-box">
                <tree-item
                  :item="item"
                  :options="item.options"
                  :chooseMoreForm="chooseMoreForm"
                  @clickSelectItem="clickSelectItem"
                ></tree-item>
              </view>
              <view v-else v-for="(oItem, oIndex) in item.options" :key="oIndex">
                <view
                  :class="[chooseMoreForm[item.key] === oItem.value ? 'o-item-active' : 'o-item']"
                  @click.stop="clickSelectItem(item, oItem)"
                >{{ oItem.label }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom-btn">
          <view class="btn-item cancel-btn" @click.stop="clickCancel">取消</view>
          <view class="btn-item" @click.stop="clickConfirm">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import TreeItem from './components/treeItem'
  import { baseIconUrl } from '@/config'
  export default {
    name: 'SelectSearch',
    components: { TreeItem },
    data() {
      return {
        baseIconUrl,
        formData: {},
        chooseMoreForm: {},
        showAllSelect: false,
        activeLabel: ''
      }
    },
    props: {
      selectConfig: {
        type: Array,
        default: []
      },
      selectForm: {
        type: Object,
        default: {}
      },
      showMoreSearch: {
        type: Boolean,
        default: false
      },
      moreConfig: {
        type: Array,
        default: [
          {
            label: '筛选项',
            key: 'select',
            options: [
              { label: '筛选项1', value: 1 },
              { label: '筛选项2', value: 2 }
            ]
          }
        ]
      }
    },
    created() {
      this.formData = { ...this.selectForm }
      if (this.showMoreSearch) {
        this.activeLabel = this.moreConfig[0].label
      }
    },
    methods: {
      change($event, key) {
        this.formData[key] = $event || null
        this.$emit('selectChange', this.formData)
      },
      clickAllSelect() {
        this.showAllSelect = true
      },
      clickMark() {
        this.showAllSelect = false
      },
      clickLabel(label) {
        this.activeLabel = label
      },
      clickSelectItem(item, oItem) {
        if (this.chooseMoreForm[item.key] && this.chooseMoreForm[item.key] === oItem.value) {
          this.chooseMoreForm = {
            ...this.formData,
            ...this.chooseMoreForm,
            [item.key]: null
          }
        } else {
          this.chooseMoreForm = {
            ...this.formData,
            ...this.chooseMoreForm,
            [item.key]: oItem.value
          }
        }
      },
      clickCancel() {
        this.showAllSelect = false
        this.$emit('selectChange', this.formData)
      },
      clickConfirm() {
        this.showAllSelect = false
        this.$emit('selectChange', this.chooseMoreForm)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/scss/uni.scss';
  .search-tab {
    position: relative;
  }
  .more-search {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    font-size: 24rpx;
    color: #6a6a6a;
    .search-btn {
      
    }
    .select-box {
      position: absolute;
      top: 64rpx;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, .4);
      z-index: 9;

      .content {
        height: 58vh;
        overflow-y: scroll;
        background-color: #fff;
        .content-box {
          width: 100vw;
          display: flex;
          .left-title {
            position: relative;
            width: 32%;
            height: 80rpx;
            font-size: 28rpx;
            color: #333;
            background-color: #f5f5f5;
            .title-item {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 100%;
              height: 80rpx;
              padding-left: 20rpx;
            }
            .active-title {
              color: #FFF;
              background-color: $--color-theme;
            }
            .circle {
              position: absolute;
              top: 20rpx;
              right: 20rpx;
              width: 10rpx;
              height: 10rpx;
              border-radius: 10rpx;
              background-color: $--color-theme;
            }
            .active-circle {
              background-color: #fff;
            }
          }
          .right-content {
            position: absolute;
            top: 0;
            right: 0;
            width: 65%;
            max-height: 58vh;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 20rpx;
            overflow-y: scroll;
            .o-item,
            .o-item-active {
              height: 40rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 8rpx;
              margin: 0 8rpx 12rpx;
              border: 2rpx solid #777;
              border-radius: 8rpx;
              color: #777;
            }
            .o-item-active {
              color: #FFF;
              background-color: $--color-theme;
              border: 2rpx solid $--color-theme;
            }
            .tree-box {
              max-height: 58vh;
              overflow-y: scroll;
            }
          }
        }
      }
      .bottom-btn {
        display: flex;
        align-items: center;
        height: 7vh;
        border-top: 2rpx solid #d4d4d4;
        background-color: #fff;
        .btn-item {
          width: 50%;
          color: $--color-theme;
          font-size: 32rpx;
          font-weight: bold;
        }
        .cancel-btn {
          border-right: 2rpx solid #d4d4d4;
        }
      }
    }
  }
</style>